<template>
  <div class="mt-10">
    <el-button type="primary" @click="selectGoods">选择商品</el-button>
    <div class="mt-10">
      <img
        v-if="goodsData.mainGraph"
        style="width: 60px; height: 60px"
        :src="goodsData.mainGraph"
      />
      <p v-if="goodsData.name" class="ft-12" style="line-height: 10px">
        {{ goodsData.name }}
      </p>
    </div>

    <GoodsTablePopup v-if="dialogVisible" :dialogVisible.sync="dialogVisible" v-model="goodsData" />
  </div>
</template>

<script>
import GoodsTablePopup from './GoodsTablePopup.vue'
export default {
  name: 'GoodsSelect',
  components: {
    GoodsTablePopup
  },
  props: {
    value: [Number, String]
  },
  data() {
    return {
      dialogVisible: false,
      // 商品信息
      goodsData: {
        id: '',
        name: '',
        mainGraph: ''
      }
    }
  },
  computed: {},
  watch: {
    'goodsData.id'(id) {
      this.$emit('input', id)
    }
  },
  created() {},
  mounted() {},
  methods: {
    selectGoods() {
      this.dialogVisible = true
    }
  }
}
</script>
